<template>
  <div class="box detailbox" ref="detail" @scroll="onScroll">
    <van-nav-bar
      title="商品详情"
      left-arrow
      @click-left="onClickLeft"
      class="nav1"
      left-text="客服"
      style="position: fixed; width: 100vw"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      class="nav2"
      right-text="搜索"
      style="position: fixed; width: 100vw"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <main>
      <van-swipe ref="mysiwpe">
        <van-swipe-item
          v-for="(image, index) in img"
          :key="index"
          @click="imagePreview(index)"
        >
          <img :src="image" style="height: 100vw; width: 100vw" />
        </van-swipe-item>
      </van-swipe>
      <h1>名称：{{ pro.proName }}</h1>
      <h2>
        <del>价格：{{ pro.price }}</del>
      </h2>
      <h2>折扣:{{ pro.discount }}</h2>
      <h2>当前价：{{ (pro.price * pro.discount) / 10 }}</h2>
      <h3>销量：{{ pro.sales }}</h3>
      <p style="height: 10rem"></p>
    </main>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="$router.push('/cart')"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="cartAdd"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="buyRight"
      />
    </van-goods-action>
  </div>
</template>
<script>
import { getDetailData, cartAdd } from "@/api/request.js";
import { getCookie } from "@/api/cookie.js";
import Vue from "vue";
import {
  Toast,
  NavBar,
  Swipe,
  SwipeItem,
  Popover,
  ImagePreview,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
} from "vant";
Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Popover);
Vue.use(ImagePreview);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
  data() {
    return {
      id: "",
      img: [],
      pro: {},
      showPopover: false,
      actions: [
        {
          text: "客服",
        },
        {
          text: "分类",
        },
        {
          text: "购物车",
        },
        {
          text: "搜索",
        },
        {
          text: "我的",
        },
      ],
    };
  },
  mounted() {
    getDetailData(this.$route.query.id).then((data) => {
      // console.log(data.data.msg);
      this.img = data.data.msg.img;
      this.pro = data.data.msg;
    });
    this.eventBus.$emit("comfooter", false);
  },
  destroyed() {
    this.eventBus.$emit("comfooter", true);
  },
  methods: {
    imagePreview(index) {
      const that = this;
      ImagePreview({
        images: this.img,
        startPosition: index,
        onChange(i) {
          that.$refs.mysiwpe.swipeTo(i);
        },
      });
    },
    onScroll() {
      let nav1 = document.getElementsByClassName("nav1")[0];
      let nav2 = document.getElementsByClassName("nav2")[0];
      if (this.$refs.detail.scrollTop > 5) {
        // nav2.style.position="fixed"
        // nav2.style.width="100vw"
        nav2.style.display = "none";
        nav1.style.display = "block";
      } else {
        nav1.style.display = "none";
        nav2.style.display = "block";
      }
    },
    onClickLeft() {
      this.$router.back();
    },
    cartAdd() {
      let that = this;
      // console.log(getCookie('token') )
      cartAdd({
        proId: this.$route.query.id,
        userId: getCookie("userId"),
        token: getCookie("token"),
        num: 1,
      })
        .then((data) => {
          if (data.data.code == 400) {
            Toast({
              message: data.data.title,
              onClose() {
                that.$router.push("/login");
              },
            });
          } else {
            Toast(data.data.title);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    buyRight() {
      let that = this;
      cartAdd({
        proId: this.$route.query.id,
        userId: getCookie("userId"),
        token: getCookie("token"),
        num: 1,
      })
        .then((data) => {
          if (data.data.code == 400) {
            Toast({
              message: data.data.title,
              onClose() {
                that.$router.push("/login");
              },
            });
          } else {
            Toast({
              message: data.data.title,
              onClose() {
                that.$router.push("/cart");
              },
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style leng="scss">
.detailbox {
  overflow: auto;
  display: flex;
  flex-direction: column;
}
</style>
